<template>
    <el-dialog
        v-model="lock"
        title="密码解锁"
        width="15%"
        align-center
        destroy-on-close
        modal-class="black-modal"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
    >
        <el-input
            type="password"
            show-password
            v-model="pwd"
            size="large"
            placeholder="输入密码以解锁"
        >
            <template #append>
                <el-button @click="handleUnlock">确认</el-button>
            </template>
        </el-input>
    </el-dialog>
    <main v-if="!lock" class="h-full">
        <RouterView />
    </main>
</template>


<script setup>
import { onMounted, provide, ref } from 'vue'

/**
 * 是否显示密码
 */
const lock = ref(true)
/**
 * 密码
 */
const pwd = ref()

const inited = ref(localStorage.getItem('machine'))
provide('inited', inited)

/**
 * 生命周期
 */
onMounted(() => {
    if (!localStorage.getItem('pwd')) {
        localStorage.setItem('pwd', 12345678)
    }
})
/**
 * 确认
 */
function handleUnlock() {
    if (localStorage.getItem('pwd') != pwd.value) {
        ElMessage.error({
            message: '密码错误！'
        })
    } else {
        lock.value = false
    }
}
</script>